<template>
	<div style="height:100%">
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div style="margin:0 20px">
					<date-picker
						@change="
							val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })
						"
						@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
			</template>
			<template #table-column-cycle="{scope}">
				<div>
					{{ scope.row.startTime }} --
					{{ scope.row.endTime }}
				</div>
			</template>
			<template #table-column-goldStageEffect="{scope}">
				<div v-for="(item, index) in scope.row.goldStageEffect" :key="index">
					{{ item.userCount }}人 / {{ item.quota }}金币 / {{ item.gold }}金币
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';

export default {
	data() {
		return {};
	},

	components: {
		DatePicker
	},

	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.integralMall.bwbtActivity)
				.set('dict', {
					api: {
						page: 'effect'
					}
				})
				.set('table', {
					columns: [
						{
							label: '周期',
							prop: 'cycle',
							align: 'center'
						},
						{
							label: '参与人数',
							prop: 'joinUserCount',
							align: 'center'
						},
						{
							label: '累计送出金币',
							prop: 'sendGoldAmount',
							align: 'center'
						},
						{
							label: '虚拟奖池',
							prop: 'virtualPrize',
							align: 'center'
						},
						{
							label: '达到阶段人数/门槛/奖励',
							prop: 'goldStageEffect',
							align: 'center'
						}
					],
					op: {
						visible: false
					}
				})

				.set('layout', [
					['refresh-btn', 'slot-filter', 'flex1'],
					['data-table'],
					['flex1', 'pagination']
				])

				.done();

			app.refresh({
				startTime: '',
				endTime: ''
			});
			this.crud = app;
		}
	}
};
</script>
<style lang="scss" scoped></style>
